<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <script src="./js/jquery-1.12.4.min.js"></script>
    <script>
        
        $(function () {
            
            // <!-- 层级菜单 -->
            function func1() {
                $(".menu li a").click(function () {
                    $(this).siblings().slideDown().parent().siblings().children("ul").slideUp(500);
                    
                })
            }

            function func2() {

                // css的值获取是通过css("left"), 控件等的值获取的使用property的方法prop("value")
                $("input").prop("value")
                $("input").prop("value", "新的默认值")

                // 简写的写法直接调用val()方法
                $("input").val()
            }

            // each(匿名函数(event))函数,把event传递给匿名函数
            // event就是所有标签添加了一个索引值，或者说event就是索引值
            function func3() {
                $(".each li").each(function (event) {
                    console.log(event);
                    $(this).html(event)
                    
                });
            }

            // 获得焦点和失去焦点事件， focus() 和 blur()或者focusout
            function func4() {
                var str  = $("#search").val()
                $("#search").focus(function () {
                    if ($(this).val() == str) {
                        $(this).val("变空")
                    }
                })

                $("#search").focusout(function () {
                    if ($(this).val() == "") {
                        $(this).val(str)
                    }
                })
            }

            // 表单的submit提交事件,获取表单元素直接调用submit方法即可
            // 某些特定浏览器有默认提交行为，需要组织表单的默认行为, event.preventDefault()或者下面的直接return false
            function func5() {
                $("#forms").submit(function (event) {
                    console.log("已经提交了,老铁...");
                    return false;
                })
            }

            func5()
        })
        
    </script>

    <style>
        
        ul.menu li ul  {
            display: none;
        }

    </style>

</head>
<body>

    <!-- 层级菜单 -->
    <ul class="menu">
        <li>
            <a href="#">水果</a>
            <ul>
                <li>水果1</li>
                <li>水果2</li>
                <li>水果3</li>
            </ul>
        </li>
        <li>
            <a href="#">水果</a>
            <ul>
                <li>水果1</li>
                <li>水果2</li>
                <li>水果3</li>
            </ul>
        </li>

        <li>
            <a href="#">水果</a>
            <ul>
                <li>水果1</li>
                <li>水果2</li>
                <li>水果3</li>
            </ul>
        </li>
    </ul>


    <input type="text" value="默认值">

    <ul class="each">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

    <input id="search" type="text" value="请输入关键字">
    <input type="button" value="搜索">

    <form action="post" id="forms">
        <input type="text" value="请输入关键字">
        <input type="submit" value="提交">
    </form>
    

</body>
</html>